<template>
    <div class="chapter" ref="chapter">
        <div v-if="newSbj" class="chapter_con">
            <div class="chapter_top">
                <div ref="zjlx_div" @click="topbtnClick($event,'zjlx')" v-bind:class="[showdiv === 'zjlx' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" >
                    章节练习
                </div>
                <!--<div ref="ksbt_div" @click="topbtnClick($event,'ksbt')" v-bind:class="[showdiv === 'ksbt' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="ksbt">快速背题</div>-->
                <!--<div class="wz-return-study-plan" id="chapter-returnStudy" style="display: none;">返回学习计划</div>-->
            </div>
            <div class="chapter_content">
                <div>
                    <my-tree v-if="theData" :data="theData" :ceng="1" :userType="mouduleUser"></my-tree>
                </div>

            </div>
        </div>
        <div v-if="!newSbj" class="chapter_con">

            <div class="chapter_top">
                <div ref="zjlx_div" @click="topbtnClick('zjlx')" v-bind:class="[showdiv === 'zjlx' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="zjlx">章节练习</div>
                <div ref="ksbt_div" @click="topbtnClick('ksbt')" v-bind:class="[showdiv === 'ksbt' ? 'chapter_topbtn_checked' : '', 'chapter_topbtn']" lang="ksbt">快速背题</div>
                <!--<div class="wz-return-study-plan" id="chapter-returnStudy" style="display: none;">返回学习计划</div>-->
            </div>
            <div class="chapter_content">
                <ul class="chapter_contentleft">
                    <li v-for="(item,index) in curMenu">
                        <div v-bind:class="['div_1',level1==index ? 'div_1_checked': '']" @click="book(item,index)">
                            <div>
                                <i>{{item.Name}}</i>
                                <img v-if="item.isLock || item.PermissionID===2" src="../../../images/suo.png" alt="">
                            </div>
                        </div>
                        <vertical-toggle >
                            <div v-show="level1==index">
                                <div v-if="item.Childs" v-for="(item1,index1) in item.Childs" v-bind:class="['div_2',level2==index1 ? 'div_2_checked': '']" @click="chapters(item1,index1)">
                                    <div>
                                        <i>{{item1.Name}}</i>
                                    </div>
                                </div>
                            </div>
                        </vertical-toggle>

                    </li>
                </ul>
                <div class="chapter_contentright">
                    <ol>
                        <li v-for="(item,index) in curMenuLast" @mousemove="showMytest(item,index)" @mouseleave="hideMytest">
                            <div class="lastName">
                                <span v-bind:class="['pct','pct'+item.pctTag]">
                                    <i>{{item.Name}}</i>
                                    <img v-if="item.isLock || item.PermissionID===2" src="../../../images/suo.png" alt="">
                                </span>

                                <br/>
                                <span class="testCount">
                                    共{{item.TestNum}}题(已答{{item.DoneNum}}题   正确率{{item.accuracy}}%)
                                </span>
                            </div>
                            <div class="answer_div" v-show="showIndex===index">
                                <div class="benzhang">重做本章</div>
                                <div class="biji">笔记({{item.noteNum}})</div>
                                <div class="shoucang">收藏({{item.favNum}})</div>
                                <div class="cuoti">错题({{item.errorNum}})</div>
                            </div>

                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getReplaceChapter,getChapterMenuUpdateTime,loadChapterMenu,getCptStatisticsX,getUserTestNumApiX,getShareChapter,getAllShareChapter} from '../../../config/getData';
    import {getAppName,getAppEName,getAppID,category,setLocalStorageValue,getLocalStorageValue,removeLocalStorageValue} from '../../../config/mUtils';
    import {authorityEName} from '../../../config/global'
    import VerticalToggle from '../../../components/common/toggle'
    import myTree from '../../components/treeMenu'
    export default {
        name: "chapterMenu",
        components: {
            VerticalToggle,
            myTree
        },
        props:['mouduleUser'],
        data: function() {
            return {
                newSbj:false,
                showdiv :'zjlx',
                curMenu : '',
                curMenuLast:'',
                level1:0,
                level2:0,
                showIndex:-1,//右侧显示列表
                oldExam:0,
                theData:'',
            }
        },
        methods:{
            topbtnClick:function (tag) {
                this.showdiv = tag;
            },
            showChapter:function () {
                getReplaceChapter().then(res=>{
                    if(getAppEName() in res){
                        this.getNewChapterMenuData().then(res=>{

                        })
                        this.newSbj = true;
                    }else{
                        this.getChapterMenuData().then(res=>{
                            this.getCptStatistics(this.curMenu);
                        }) ;
                    }
                })
            },
            async getChapterMenuData(){
                let appEName = getAppEName();
                let appName = getAppName();
                let appID = getAppID();
                let guid = localStorage.getItem('guid');
                if(!appEName){
                    AlertModule.show({
                        title: '提示',
                        content: '请选择科目'
                    })
                    return;
                }
                let updateTime ='';
                if(!!window.localStorage){
                    let chapterMenu=getLocalStorageValue(appEName+'_chapterMenuData');
                    await getChapterMenuUpdateTime(appEName).then(res=>{
                        if(res.status === 200){
                            updateTime = res.data.ChapterMenuUpdateTime;
                        }
                    });
                    if(chapterMenu && updateTime===chapterMenu.UpdateTime){
                        let chapterData = JSON.parse(chapterMenu.Data).Childs;
                        let tempArr = [];
                        this.MenuDataForma(chapterData,tempArr);
                        if(!this.mouduleUser){
                            if(category('',appName) === 'gaoji'){
                                this.initTest(tempArr,'gaoji','','');
                                this.curMenu= tempArr;
                                this.curMenuLast = tempArr[0].Childs[0].Childs;
                            }else if(authorityEName.indexOf(appEName) >-1){
                                await getShareChapter(appID,guid).then(res=>{
                                    let sharestatus = res.data;
                                    if(res.status===200){
                                         getAllShareChapter(appID,guid).then(resNew=>{
                                            if(resNew.status===200){
                                                let chapterShare = resNew.data;
                                                this.initTest(tempArr,'zhiye',sharestatus,chapterShare);
                                                this.curMenu= tempArr;
                                                this.curMenuLast = tempArr[0].Childs[0].Childs;
                                            }
                                        })
                                    }
                                })
                            }
                        }
                        this.curMenu= tempArr;
                        this.curMenuLast = tempArr[0].Childs[0].Childs;
                        return ;
                    }
                }
                await loadChapterMenu(appEName,0).then(res=>{
                    if(res.status===200){
                        let chapterMenuData = res.data;
                        let chapterMenuJson={
                            "Data":chapterMenuData.ChapterMenuJson,
                            "AppEName":appEName,
                            "UpdateTime":updateTime
                        };
                        let chapterData = JSON.parse(chapterMenuData.ChapterMenuJson).Childs;
                        let tempArr = [];
                        this.MenuDataForma(chapterData,tempArr);
                        if(!this.mouduleUser){
                            if(category('',appName) === 'gaoji'){
                                this.initTest(tempArr,'gaoji','','');
                                this.curMenu= tempArr;
                                this.curMenuLast = tempArr[0].Childs[0].Childs;
                            }else if(authorityEName.indexOf(appEName) >-1){
                                 getShareChapter(appID,guid).then(res=>{
                                    let sharestatus = res.data;
                                    if(res.status===200){
                                        getAllShareChapter(appID,guid).then(resNew=>{
                                            if(resNew.status===200){
                                                let chapterShare = resNew.data;
                                                this.initTest(tempArr,'zhiye',sharestatus,chapterShare);
                                                this.curMenu= tempArr;
                                                this.curMenuLast = tempArr[0].Childs[0].Childs;
                                            }
                                        })
                                    }
                                })
                            }
                        }
                        this.curMenu= tempArr;
                        this.curMenuLast = tempArr[0].Childs[0].Childs;
                        if(!!window.localStorage){
                            removeLocalStorageValue(appEName+'_chapterMenuData');
                            setLocalStorageValue(appEName+'_chapterMenuData',chapterMenuJson)
                        }
                        return;
                    }
                    console.log(this.curMenuLast)
                })
            },
            MenuDataForma(data,tempArr){
                let YTarr = ['特训密卷', '押题密卷', '内部资料', '考前押题', '押题测试','知识点试题'];
                for(let i=0;i<data.length;i++){
                    let isShow = 1;
                    for (let j = 0; j < YTarr.length; j++) {
                        if (data[i].Name.indexOf(YTarr[j]) > -1) {
                            isShow = 0;
                        }
                    }
                    if(isShow === 1){
                        tempArr.push(data[i]);
                    }
                }
            },
            getCptStatistics(data){
                let guid = localStorage.getItem('guid');
                let appID = getAppID();
                getCptStatisticsX(guid,appID).then(res=>{
                    if(res.status === 200){
                        this.getTestNum(data,res.data);
                        this.curMenuLast = data[0].Childs[0].Childs;
                    }
                })
                console.log(this.curMenuLast)
            },
            book(data,index){
                if(data.isLock){
                    console.log(';;;')
                    return
                }
                if(this.level1 === index){
                    this.level1 = -1;
                }else{
                    this.level1 = index;
                    this.level2 = 0;
                    this.curMenuLast = data.Childs[0].Childs;
                }

            },
            chapters(data,index){
                if(data.isLock){
                    console.log(';;;')
                    return
                }
                this.level2 = index;
                this.curMenuLast = data.Childs;

            },
            getUserInfo(cptID, data) {
                let userInfo = {
                    "testCount": 0,
                    "RightCount": 0
                };
                for (let i = 0; i < data.length; i++) {
                    if (data[i].CptID === cptID) {
                        userInfo.testCount = data[i].testCount;
                        userInfo.RightCount = data[i].RightCount;
                        break;
                    }
                }
                return userInfo;
            },
            initTest(data,type,zhentistatus,cptData,newModule){//是否上锁
                if(type==='gaoji'){
                    for(let i=0;i< data.length;i++){
                        let curMenu = data[i];

                        if(!curMenu.Childs || curMenu.Childs.length ===0){
                            curMenu.isLock = 0;
                            if(i>4){
                                curMenu.isLock = 1;
                            }
                        }else{
                            curMenu.isLock = 0;
                            if(i>0){
                                curMenu.isLock = 1;
                            }
                            this.initTest(curMenu.Childs,type,zhentistatus,cptData,newModule);
                        }
                    }
                }else{
                    let ZhenArr = ['历年真题','历年试题','历年真题精选'];
                    for(let i=0;i< data.length;i++){
                        let curMenu = data[i];
                        if(!curMenu.Childs || curMenu.Childs.length ===0){
                            if(curMenu.isOldExam){
                                curMenu.PermissionID=2;
                            }else{
                                if(cptData){
                                    for(let z =0;z<cptData.length ;z++){
                                        if(cptData[z].MaterialCptID === curMenu.ID){
                                            curMenu.PermissionID=3;
                                        }
                                    }
                                }
                            }
                        }else{
                            for(let j = 0;j < ZhenArr.length; j++){
                                curMenu.isOldExam = 0;
                                if(newModule){
                                    if(curMenu.ChapterName.indexOf(ZhenArr[j]) > -1){
                                        curMenu.isLock = 1;//历年真题上锁
                                        curMenu.isOldExam = 1;//历年真题上
                                        if(zhentistatus === 1){
                                            curMenu.isLock = 0;
                                        }
                                    }
                                }else{
                                    if(curMenu.Name.indexOf(ZhenArr[j]) > -1){
                                        curMenu.isLock = 1;//历年真题上锁
                                        curMenu.isOldExam = 1;//历年真题上
                                        if(zhentistatus === 1){
                                            curMenu.isLock = 0;
                                        }
                                    }
                                }
                            }
                            if(curMenu.isOldExam){
                                for(let j=0;j<curMenu.Childs.length;j++){
                                    curMenu.Childs[j].isOldExam = 1;
                                }
                            }
                            this.initTest(curMenu.Childs,type,zhentistatus,cptData,newModule);
                        }

                    }
                }
            },
            getTestNum(data, userInfo) {
                for (let i = 0; i < data.length; i++) {
                    let curMenu = data[i];
                    if (!curMenu.Childs || curMenu.Childs.length == 0) {
                        var cptInfo = this.getUserInfo(curMenu.ID, userInfo);
                        if(cptInfo.RightCount){
                            curMenu.RightCount = cptInfo.RightCount;
                        }else{
                            curMenu.RightCount=0
                        }
                        if(cptInfo.testCount){
                            curMenu.DoneNum = cptInfo.testCount;
                            curMenu.accuracy = (curMenu.RightCount/curMenu.DoneNum *100).toFixed(2);
                        }else{
                            curMenu.DoneNum = 0;
                            curMenu.accuracy ='0.00';
                        }

                        let pct = curMenu.DoneNum/curMenu.TestNum;
                        if(pct == 0) {
                            curMenu.pctTag=0;
                        }else if(pct > 0 && pct <0.25) {
                            curMenu.pctTag=1;
                        }else if(pct >=0.25 && pct <0.37) {
                            curMenu.pctTag=2;
                        }else if(pct >=0.37 && pct <0.50) {
                            curMenu.pctTag=3;
                        }else if(pct >= 0.50 && pct <0.62) {
                            curMenu.pctTag=4;
                        }else if(pct >= 0.62 && pct <0.75) {
                            curMenu.pctTag=5;
                        }else if(pct >= 0.75 && pct <0.87) {
                            curMenu.pctTag=6;
                        }else if(pct >= 0.87 && pct <1) {
                            curMenu.pctTag=7;
                        }else{
                            curMenu.pctTag=8;
                        }
                    } else {
                        this.getTestNum(curMenu.Childs, userInfo);
                    }
                }
            },
            getUserTest(item,index){
                let _appID = getAppID();
                let _guid = localStorage.getItem('guid');
                getUserTestNumApiX(_appID,item.ID,_guid).then(res=>{
                    if(res.status===200){
                        let jsonData = res.data;
                        item.favNum = jsonData.favNum;
                        item.noteNum = jsonData.noteNum;
                        item.errorNum = jsonData.wrongTestNum;
                        this.showIndex = index;
                    }
                }) ;
            },
            showMytest(item,index){
                if(item.isLock || item.PermissionID===2){
                    this.showIndex = -1;
                    return;
                }
                if(item.favNum!=undefined){
                    this.showIndex = index;
                }else{
                    this.getUserTest(item,index);
                }

            },
            hideMytest(){
                // this.showIndex = -1;
            },

            async getNewChapterMenuData(){
                let appEName = getAppEName();
                let appName = getAppName();
                let appID = getAppID();
                let guid = localStorage.getItem('guid');
                if(!appEName){
                    AlertModule.show({
                        title: '提示',
                        content: '请选择科目'
                    })
                    return;
                }
                let updateTime ='';
                if(!!window.localStorage){
                    let chapterMenu=getLocalStorageValue(appEName+'_chapterMenuData');
                    await getChapterMenuUpdateTime(appEName).then(res=>{
                        if(res.status === 200){
                            updateTime = res.data.ChapterMenuUpdateTime;
                        }
                    });
                    if(chapterMenu && updateTime===chapterMenu.UpdateTime){
                        let chapterData = JSON.parse(chapterMenu.Data).Childs;
                        let tempArr = [];
                        if(!this.mouduleUser){
                            if(category('',appName) === 'gaoji'){
                                this.initTest(chapterData,'gaoji','','','new');
                                this.theData= chapterData;
                                // this.curMenuLast = chapterData[0].Childs[0].Childs;
                            }else if(authorityEName.indexOf(appEName) >-1){
                                await getShareChapter(appID,guid).then(res=>{
                                    let sharestatus = res.data;
                                    if(res.status===200){
                                        getAllShareChapter(appID,guid).then(resNew=>{
                                            if(resNew.status===200){
                                                let chapterShare = resNew.data;
                                                this.initTest(chapterData,'zhiye',sharestatus,chapterShare,'new');
                                                this.theData= chapterData;
                                                // this.curMenuLast = chapterData[0].Childs[0].Childs;
                                            }
                                        })
                                    }
                                })
                            }
                        }
                        this.theData= chapterData;
                        // this.curMenuLast = chapterData[0].Childs[0].Childs;
                        return ;
                    }
                }
                await loadChapterMenu(appEName,1).then(res=>{
                    if(res.status===200){
                        let chapterMenuData = res.data;
                        let chapterMenuJson={
                            "Data":chapterMenuData.ChapterMenuJson,
                            "AppEName":appEName,
                            "UpdateTime":updateTime
                        };
                        let chapterData = JSON.parse(chapterMenuData.ChapterMenuJson).Childs;
                        let tempArr = [];
                        if(!this.mouduleUser){
                            if(category('',appName) === 'gaoji'){
                                this.initTest(chapterData,'gaoji','','');
                                this.theData= chapterData;
                                // this.curMenuLast = chapterData[0].Childs[0].Childs;
                            }else if(authorityEName.indexOf(appEName) >-1){
                                getShareChapter(appID,guid).then(res=>{
                                    let sharestatus = res.data;
                                    if(res.status===200){
                                        getAllShareChapter(appID,guid).then(resNew=>{
                                            if(resNew.status===200){
                                                let chapterShare = resNew.data;
                                                this.initTest(chapterData,'zhiye',sharestatus,chapterShare,'new');
                                                this.theData= chapterData;
                                                // this.curMenuLast = chapterData[0].Childs[0].Childs;
                                            }
                                        })
                                    }
                                })
                            }
                        }
                        this.theData= chapterData;
                        // this.curMenuLast = chapterData[0].Childs[0].Childs;
                        if(!!window.localStorage){
                            removeLocalStorageValue(appEName+'_chapterMenuData');
                            setLocalStorageValue(appEName+'_chapterMenuData',chapterMenuJson)
                        }
                        return;
                    }
                })
            },

        },

        mounted:function () {
            this.showChapter();
        }
    }
</script>

<style scoped lang="less">
    @main_color:#5bb8ff;
    @white:#fff;
    @green_color:#66cc80;
    @yellow_color:#ffb73e;
    @red_color:#fc7a7e;
    @black:#000;
    @color_6:#666;
    @color_3:#333;
    @color_d:#ddd;
    @color_df:#dfdfdf;
    @color_9:#999;
    @color_f3:#f3f3f3;
    .chapter{
        height: 100%;
        overflow: auto;
        .chapter_con{
            height: 100%;
        }
        i{
            font-style: normal;
        }
    }
    .chapter_top{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        .chapter_topbtn{
            font-size: 14px;
            float: left;
            margin: 10px;
            padding: 5px 10px;
            cursor: pointer;

        }
        .chapter_topbtn_checked{
            background: #F3F3F3;
            color: @main_color;
            border-radius: 4px;
        }
    }
    .chapter_content{
        height: calc(100% - 50px);
    }
    .chapter_contentleft{
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        float: left;
        width: 300px;
        padding-top: 0px;
        background-color: @color_f3;
        border-right: 1px solid @color_df;
        font-size: 16px;
        color: @color_3;
        .div_1{
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid @color_df;
            cursor: pointer;
            background: url(../../../images/shouqi.png) no-repeat 5px center;
            background-size:12px;
            padding-left:23px;
            text-indent:0px;
            div{
                clear: both;
            }
            i{
                line-height: 22px;
            }
            img{
                vertical-align:middle;
                display:inline-block;
            }

        }
        .div_1_checked{
            color: @main_color;
            background: url(../../../images/zhankai.png) no-repeat 5px center;
            background-size:12px;
        }
        .div_2{
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid @color_df;
            cursor: pointer;
            padding-left:33px;
            text-indent:0px;
            clear: both;
            i{
                font-style: normal;
            }

        }
        .div_2_checked{
            color: @main_color;
        }
    }
    .chapter_contentright{
        height: 100%;
        width: auto;
        overflow-x:auto;
        li{
            width: 100%;
            border-top: 1px solid @color_df;
            cursor: pointer;
            position: relative;
            clear: both;
            .lastName{
                float: left;
                padding: 10px 10px 15px 10px;
                cursor: pointer;
                width: 50%;
                color: @color_3;
                i{
                    float: left;
                }
                img{
                    float: left;
                    margin-top: 2px;
                }
                .pct{
                    float: left;
                    background: url(../../../images/cake00.png) 0px center no-repeat;
                    background-size: 15px;
                    padding-left: 30px;
                    height: 21px;
                    line-height: 21px;
                    font-size: 16px;
                    cursor: pointer;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 90%;
                    overflow: hidden;
                }
                .pct0{
                    background: url(../../../images/cake00.png) 0px center no-repeat;
                }
                .pct1{
                    background: url(../../../images/cake24.png) 0px center no-repeat;
                }
                .pct2{
                    background: url(../../../images/cake25.png) 0px center no-repeat;
                }
                .pct3{
                    background: url(../../../images/cake37.png) 0px center no-repeat;
                }
                .pct4{
                    background: url(../../../images/cake50.png) 0px center no-repeat;
                }
                .pct5{
                    background: url(../../../images/cake62.png) 0px center no-repeat;
                }
                .pct6{
                    background: url(../../../images/cake75.png) 0px center no-repeat;
                }
                .pct7{
                    background: url(../../../images/cake87.png) 0px center no-repeat;
                }
                .pct8{
                    background: url(../../../images/cake100.png) 0px center no-repeat;
                }
                .testCount{
                    font-size: 14px;
                    color: @color_9;
                    padding-top: 2px;
                    padding-left: 30px;
                    cursor: pointer;
                    clear: both;
                    margin-left: 1px;
                    float: left;
                }

            }
            .answer_div{
                float: right;
                font-size: 14px;
                border-top: 0px solid #ccc !important;
                margin-top: 20px;
                margin-right: 0px;
                max-width: 320px;
                div{
                    float: right;
                    width: 70px;
                    text-align: center;
                    padding-right: 8px;
                    padding-top: 3px;
                    padding-bottom: 5px;
                    cursor: pointer;
                    border: 1px solid @color_df;
                }
                .cuoti{
                    color: @main_color;
                    border-radius: 5px 0px 0px 5px;
                }
                .shoucang{
                    color: @green_color;
                }
                .biji{
                    color: @yellow_color;
                }
                .benzhang{
                    color: @red_color;
                    border-radius: 0px 5px 5px 0px;
                }
            }
        }
    }

    @media screen and (max-height: 720px){
        .chapter_top{
            height: 40px;
            .chapter_topbtn{
                margin: 8px;
                padding: 2px 10px;
            }
        }

    }
</style>
